<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="view9port" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/civilServiceReport.css" />
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="/static/js/template.js"></script>
  <script src="/static/js/echarts.js"></script>
  <script id="template">
    <div class="page-item">
      <img class="one-bg-img" src="/static/images/bg.png" />
      <img class="one-logo" src="/static/images/logo.png" />
      <div class="one-title">
        <div class="one-chinese">面试训练报告</div>
        <div class="one-engl">TRAINING REPORT</div>
      </div>
      <div class="one-training-time">
        <div class="one-content-title">训练日期</div>
        <div class="one-content-label"><%=time%></div>
      </div>
      <div class="one-training-duration">
        <div class="one-content-title">训练时长</div>
        <div class="one-content-label"><%=duration%></div>
      </div>
    </div>

    <div class="page-item two-page-item">
      <div class="two-copyright"></div>
      <div class="two-user-container">
        <div class="two-user-wrap">
          <% for(var i=0;i< userData.length; i++){ %>
          <div class="two-user-item">
            <%= userData[i].label %>：<%= userData[i].value %>
          </div>
          <% } %>
        </div>
      </div>
      <div class="global-title two-interview-score">面试得分</div>
      <div class="two-score-container">
        <div id="chart-percentage"></div>
        <div class="two-score">
          <span class="two-score-num"><%=interviewScore%></span>分
        </div>
        <div class="two-score-label">
          *本次报告具有隐私性，仅供训练人和相关单位使用，请妥善保管报告文件
        </div>
      </div>
    </div>

    <div class="page-item three-page-item">
      <div class="global-title">综合评价</div>
      <% if (guide.advantageArr.length>0){ %>
      <div class="global-item-container three-advantage-container">
        <div class="three-header">
          <img
            class="three-header-icon"
            src="/static/images/advantage-icon.png"
          />
          <div class="three-header-title">表现优异</div>
        </div>
        <% for(var i =0; i< guide.advantageArr.length; i++) { %>
        <div class="three-line-container">
          <div class="three-line-bg">
            <div
              class="three-advantage-line"
              style="width: <%=guide.advantageArr[i].score%>%;"
            >
              <%=guide.advantageArr[i].score%>分
            </div>
          </div>
          <div class="three-line-label"><%=guide.advantageArr[i].title%></div>
        </div>
        <% } %>
      </div>
      <% } %> <% if (guide.promotedArr.length>0){ %>
      <div class="global-item-container three-promoted-container">
        <div class="three-header">
          <img
            class="three-header-icon"
            src="/static/images/promoted-icon.png"
          />
          <div class="three-header-title">有待提升</div>
        </div>
        <% for(var i =0; i< guide.promotedArr.length; i++) { %>
        <div class="three-line-container">
          <div class="three-line-bg">
            <div
              class="three-promoted-line"
              style="width: <%=guide.promotedArr[i].score%>%;"
            >
              <%=guide.promotedArr[i].score%>分
            </div>
          </div>
          <div class="three-line-label"><%=guide.promotedArr[i].title%></div>
        </div>
        <% } %>
      </div>
      <% } %>
      <div class="three-report-instruction-title">报告说明</div>
      <div class="three-report-top-label">
        面试报告依托人工智能算法对面试者的回答质量、情绪、心理状态等进行全方位分析，从综合分析能力、应急应变能力
        、计划组织协调能力、人际交往能力、言语表达能力、自我情绪控制六个维度进行评测，形成综合分析报告，客观科学地评价每个面试者的面试状态和专业能力。
      </div>
      <div class="three-report-bottom-label">
        由于面试报告是基于面试者回答的综合评估，面试者面试过程中的心理状态、坦诚度和情绪等因素将会影响面试结果，请合理参考使用。
      </div>
    </div>

    <div class="page-item four-page-item">
      <div class="global-title">面试状态分析</div>
      <div class="global-has-icon-title four-has-icon-title">
        语言表达能力
        <span class="global-has-icon-title-label"
          >含语言流畅度、条理性、重点把控力、语言逻辑性</span
        >
      </div>
      <div class="global-interview-state-label">
        <%=interviewState.presentationSkillsLabel%>
      </div>
      <div class="global-item-container four-fluency-container">
        <div class="global-item-container-title">
          语言流畅度
          <span class="global-has-icon-title-label"
            >在问答问题的过程中，语言所表现出的语速以及连贯性</span
          >
        </div>
        <div class="global-chart-container">
          <div class="global-full-score">满分</div>
          <div class="global-pass">及格</div>
          <div class="global-excellent">优秀参考曲线</div>
          <img
            class="four-fluency-line"
            src="/static/images/fluency-line.png"
          />
          <div id="presentation"></div>
        </div>
        <div class="global-item-container-label">
          <%=interviewState.fluencyLabel%>
        </div>
      </div>
      <div class="global-item-container four-logic-container">
        <div class="global-item-container-title">
          语言逻辑性
          <span class="global-has-icon-title-label"
            >面试过程中语言精炼准确、表述内容结构化、层次清晰
          </span>
        </div>
        <div class="global-item-container-label four-logic-label">
          <%=interviewState.logicLabel%>
        </div>
      </div>
    </div>

    <div class="page-item five-page-item">
      <div class="global-item-container ">
        <div class="global-item-container-title">
          语调气场
          <span class="global-has-icon-title-label"
            >描述自己想法过程中，语言的快慢轻重的配置和变化</span
          >
        </div>
        <div class="global-chart-container">
          <div class="global-full-score">满分</div>
          <div class="global-pass">及格</div>
          <div class="global-excellent">优秀参考曲线</div>
          <img
            class="five-intonation-line"
            src="/static/images/intonation-line.png"
          />
          <div id="intonation"></div>
        </div>
        <div class="global-item-container-label">
          <%=interviewState.intonationLabel%>
        </div>
      </div>
      <div class="global-item-container five-item-container">
        <div class="global-item-container-title">
          重点把控力
          <span class="global-has-icon-title-label"
            >面试过程中，给出的回答围绕主题的涵盖性
          </span>
        </div>
        <div class="global-item-container-label five-item-label">
          <%=interviewState.keyForceLabel%>
        </div>
      </div>
      <div class="global-item-container five-item-container">
        <div class="global-item-container-title">
          条理性
          <span class="global-has-icon-title-label"
            >描述思路时，针对问题的解答分点的能力
          </span>
        </div>
        <div class="global-item-container-label five-item-label">
          <%=interviewState.organizedLabel%>
        </div>
      </div>
    </div>

    <div class="page-item six-page-item">
      <div class="global-item-container">
        <div class="global-item-container-title">
          情绪控制
          <span class="global-has-icon-title-label "
            >压力中语言语调是否自然，表述是否冷静克制具有理性
          </span>
        </div>
        <div class="global-item-container-label six-item-label">
          <%=interviewState.emotionsLabel%>
        </div>
      </div>
      <div class="global-has-icon-title six-has-icon-title">
        表现力
        <span class="global-has-icon-title-label"
          >面试过程中，所体现出来的应对能力与综合表现</span
        >
      </div>
      <div class="global-item-container ">
        <div class="global-chart-container six-chart-container">
          <div class="global-full-score">满分</div>
          <div class="global-pass">及格</div>
          <div class="global-excellent">优秀参考曲线</div>
          <img
            class="six-expressive-line"
            src="/static/images/expressive-line.png"
          />
          <div id="expressive"></div>
        </div>
        <div class="global-item-container-label">
          <%=interviewState.intonationLabel%>
        </div>
      </div>
    </div>

    <div class="page-item seven-page-item">
      <div class="global-has-icon-title">
        自信度
        <span class="global-has-icon-title-label"
          >对于回答的自信心以及积极性的表现</span
        >
      </div>
      <div class="global-item-container seven-item-container">
        <div class="global-chart-container seven-chart-container">
          <div class="global-full-score">满分</div>
          <div class="global-pass">及格</div>
          <div class="global-excellent">优秀参考曲线</div>
          <img
            class="seven-self-confidence-line"
            src="/static/images/self-confidence-line.png"
          />
          <div id="self-confidence"></div>
        </div>
        <div class="global-item-container-label">
          <%=interviewState.selfConfidenceLabel%>
        </div>
      </div>

      <div class="global-title">职业能力解析</div>
      <div class="global-secondary-title"><%=professional[0][0].label%></div>
      <div class="global-score-container">
        <div
          class="global-score-line"
          style="width: <%=professional[0][0].score%>%;"
        >
          <div class="global-score-label"><%=professional[0][0].score%>分</div>
        </div>
      </div>
      <div class="global-item-container seven-next-item-container">
        <div class="global-professional-label-container">
          <div class="global-professional-label-left">
            <div class="global-professional-title">低分表现</div>
            <div class="global-professional-msg">
              <%= professional[0][0].lowPerformance %>
            </div>
          </div>
          <div class="global-professional-label-right">
            <div class="global-professional-title">高分表现</div>
            <div class="global-professional-msg">
              <%= professional[0][0].highPerformance %>
            </div>
          </div>
        </div>
      </div>
    </div>

    <% if(professional.length>1) {%> <% for(var i = 1; i< professional.length;
    i++) { %>
    <div class="page-item professional-page-item">
      <% for(var j = 0;j< professional[i].length; j++) {%>
      <div class="global-secondary-title"><%=professional[i][j].label%></div>
      <div class="global-score-container">
        <div
          class="global-score-line"
          style="width: <%=professional[i][j].score%>%;"
        >
          <div class="global-score-label"><%=professional[i][j].score%>分</div>
        </div>
      </div>
      <div class="global-item-container seven-next-item-container">
        <div class="global-professional-label-container">
          <div class="global-professional-label-left">
            <div class="global-professional-title">低分表现</div>
            <div class="global-professional-msg">
              <%= professional[i][j].lowPerformance %>
            </div>
          </div>
          <div class="global-professional-label-right">
            <div class="global-professional-title">高分表现</div>
            <div class="global-professional-msg">
              <%= professional[i][j].highPerformance %>
            </div>
          </div>
        </div>
      </div>
      <% } %>
    </div>
    <% } %> <% } %> <% if (guide.promotedArr.length>0){ %>
    <div class="page-item eight-page-item">
      <div class="global-title">面试指导</div>
      <div class="eight-title-container">
        <img class="eight-title-icon" src="/static/images/promoted-icon.png" />
        <div class="eight-title">以下部分有待提升</div>
      </div>
      <div class="global-item-container">
        <% for(var i=0; i< guide.promotedArr.length; i++) { %>
        <div class="eight-has-icon-title"><%=guide.promotedArr[i].title%></div>
        <div class="eight-content-item"><%=guide.promotedArr[i].label%></div>
        <% } %>
      </div>
    </div>
    <% } %>
  </script>
  <script>
    var data = {
      time: {{ .time }}, //面试日期
    duration: {{ .duration }},
    // userImgUrl:
    //   {{ .userImgUrl }}, //头像地址
    userData: {{ .userData }},
    interviewScore: {{ .interviewScore }}, //综合得分
    //面试表现
    interviewState: {{ .interviewState }},
    //专业能力解析，三个为一组，做分页用
    professional: {{ .professional }},
    //面试指导
    guide: {{ .guide }},
    //人格测评
    personalityAssessment: {{ .personalityAssessment }},
    };
    var html = template("template", data);
    document.getElementById("root").innerHTML = html;

    //版权日期
    var twoCopyrightDom = document.getElementsByClassName('two-copyright')[0];
    twoCopyrightDom.innerHTML = "©" + new Date().getFullYear() + " " + "智谱·AI 版权所有";

    //环形图
    var percentageDomOne = document.getElementById("chart-percentage");
    var percentageChartOne = echarts.init(percentageDomOne);
    var percentageOptionOne = {
      animation: false,
      legend: {},
      angleAxis: {
        show: false,
        // 后面的180表示圆环的跨越的角度， 如max设置为100*360/270,startAngle设置为-135
        max: (100 * 360) / 180,
        type: "value",
        startAngle: -180,
        splitLine: {
          show: false,
        },
      },
      // 修改环形的宽度
      barMaxWidth: 30,
      radiusAxis: {
        show: false,
        type: "category",
      },
      polar: {
        // 设置环形的位置
        center: ["50%", "60%"],
        // 设置环形大小
        radius: "210%",
      },
      series: [
        {
          type: "bar",
          data: [
            {
              value: data.interviewScore,
              itemStyle: {
                // 这里是已经达到进度的颜色
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#FEC2F2",
                  },
                  {
                    offset: 1,
                    color: "#826AF9",
                  },
                ]),
              },
            },
          ],
          roundCap: true,
          barGap: "-100%",
          coordinateSystem: "polar",
          z: 3,
        },
        {
          type: "bar",
          data: [
            {
              value: 100,
              itemStyle: {
                // 这里是环形底色
                color: "#faf8fd",
                borderWidth: 0,
              },
            },
          ],
          roundCap: true,
          barGap: "-100%",
          coordinateSystem: "polar",
          z: 1,
        },
      ],
    };
    percentageOptionOne && percentageChartOne.setOption(percentageOptionOne);

    //流畅度图
    var presentationDom = document.getElementById("presentation");
    var presentationChart = echarts.init(presentationDom);
    var presentationOption = {
      animation: false,
      xAxis: {
        type: "category",
        data: data.interviewState.fluencyData,
        boundaryGap: false,
        name: "面试题目",
        nameTextStyle: {
          color: "#AFB1B2",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DADEE1",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#999999",
          fontSize: 14,
          formatter: function (value, index) {
            return index + 1;
          },
        },
      },
      yAxis: {
        type: "value",
        name: "流畅度",
        nameTextStyle: {
          color: "#AFB1B2",
          fontSize: 18,
        },
        nameGap: 30,
        max: 100,
        min: 0,
        splitNumber: 5,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DADEE1",
          },
        },
        axisLabel: {
          color: "#999999",
          fontSize: 14,
        },
      },
      series: [
        {
          data: data.interviewState.fluencyData,
          type: "line",
          z: 9,
          smooth: true,
          symbolSize: 12,
          lineStyle: {
            width: 5,
            shadowBlur: 5,
            shadowColor: "rgba(0, 90, 252, 0.2)",
            shadowOffsetY: 7,
          },
          color: "#85a0ff",
        },
        {
          data: [],
          type: "line",
          z: 1,
          markLine: {
            symbol: "none",
            data: [
              {
                name: "及格",
                yAxis: 60,
                label: {
                  show: false,
                },
                blur: {
                  label: {
                    show: false,
                  },
                  lineStyle: { show: false },
                },
              },
            ],
            lineStyle: {
              color: "#fe98ea",
              type: "solid",
              width: 2,
            },
          },
        },
        {
          data: [],
          type: "line",
          z: 1,
          markLine: {
            symbol: "none",
            data: [
              {
                name: "满分",
                yAxis: 100,
                label: {
                  show: false,
                },
                blur: {
                  label: {
                    show: false,
                  },
                  lineStyle: { show: false },
                },
              },
            ],
            lineStyle: {
              color: "#9370F2",
              type: "solid",
              width: 2,
            },
          },
        },
      ],
    };
    presentationOption && presentationChart.setOption(presentationOption);

    //语调气场图
    var presentationDom = document.getElementById("intonation");
    var presentationChart = echarts.init(presentationDom);
    var presentationOption = {
      animation: false,
      xAxis: {
        type: "category",
        data: data.interviewState.intonationData,
        boundaryGap: false,
        name: "面试题目",
        nameTextStyle: {
          color: "#AFB1B2",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DADEE1",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#999999",
          fontSize: 14,
          formatter: function (value, index) {
            return index + 1;
          },
        },
      },
      yAxis: {
        type: "value",
        name: "流畅度",
        nameTextStyle: {
          color: "#AFB1B2",
          fontSize: 18,
        },
        nameGap: 30,
        max: 100,
        min: 0,
        splitNumber: 5,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DADEE1",
          },
        },
        axisLabel: {
          color: "#999999",
          fontSize: 14,
        },
      },
      series: [
        {
          data: data.interviewState.intonationData,
          type: "line",
          z: 9,
          smooth: true,
          symbolSize: 12,
          lineStyle: {
            width: 5,
            shadowBlur: 5,
            shadowColor: "rgba(0, 90, 252, 0.2)",
            shadowOffsetY: 7,
          },
          color: "#85a0ff",
        },
        {
          data: [],
          type: "line",
          z: 1,
          markLine: {
            symbol: "none",
            data: [
              {
                name: "及格",
                yAxis: 60,
                label: {
                  show: false,
                },
                blur: {
                  label: {
                    show: false,
                  },
                  lineStyle: { show: false },
                },
              },
            ],
            lineStyle: {
              color: "#fe98ea",
              type: "solid",
              width: 2,
            },
          },
        },
        {
          data: [],
          type: "line",
          z: 1,
          markLine: {
            symbol: "none",
            data: [
              {
                name: "满分",
                yAxis: 100,
                label: {
                  show: false,
                },
                blur: {
                  label: {
                    show: false,
                  },
                  lineStyle: { show: false },
                },
              },
            ],
            lineStyle: {
              color: "#9370F2",
              type: "solid",
              width: 2,
            },
          },
        },
      ],
    };
    presentationOption && presentationChart.setOption(presentationOption);

    //表现力图
    var presentationDom = document.getElementById("expressive");
    var presentationChart = echarts.init(presentationDom);
    var presentationOption = {
      animation: false,
      xAxis: {
        type: "category",
        data: data.interviewState.expressiveData,
        boundaryGap: false,
        name: "面试题目",
        nameTextStyle: {
          color: "#AFB1B2",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DADEE1",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#999999",
          fontSize: 14,
          formatter: function (value, index) {
            return index + 1;
          },
        },
      },
      yAxis: {
        type: "value",
        name: "流畅度",
        nameTextStyle: {
          color: "#AFB1B2",
          fontSize: 18,
        },
        nameGap: 30,
        max: 100,
        min: 0,
        splitNumber: 5,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DADEE1",
          },
        },
        axisLabel: {
          color: "#999999",
          fontSize: 14,
        },
      },
      series: [
        {
          data: data.interviewState.expressiveData,
          type: "line",
          z: 9,
          smooth: true,
          symbolSize: 12,
          lineStyle: {
            width: 5,
            shadowBlur: 5,
            shadowColor: "rgba(0, 90, 252, 0.2)",
            shadowOffsetY: 7,
          },
          color: "#85a0ff",
        },
        {
          data: [],
          type: "line",
          z: 1,
          markLine: {
            symbol: "none",
            data: [
              {
                name: "及格",
                yAxis: 60,
                label: {
                  show: false,
                },
                blur: {
                  label: {
                    show: false,
                  },
                  lineStyle: { show: false },
                },
              },
            ],
            lineStyle: {
              color: "#fe98ea",
              type: "solid",
              width: 2,
            },
          },
        },
        {
          data: [],
          type: "line",
          z: 1,
          markLine: {
            symbol: "none",
            data: [
              {
                name: "满分",
                yAxis: 100,
                label: {
                  show: false,
                },
                blur: {
                  label: {
                    show: false,
                  },
                  lineStyle: { show: false },
                },
              },
            ],
            lineStyle: {
              color: "#9370F2",
              type: "solid",
              width: 2,
            },
          },
        },
      ],
    };
    presentationOption && presentationChart.setOption(presentationOption);

    //自信度图
    var presentationDom = document.getElementById("self-confidence");
    var presentationChart = echarts.init(presentationDom);
    var presentationOption = {
      animation: false,
      xAxis: {
        type: "category",
        data: data.interviewState.selfConfidenceData,
        boundaryGap: false,
        name: "面试题目",
        nameTextStyle: {
          color: "#AFB1B2",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DADEE1",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#999999",
          fontSize: 14,
          formatter: function (value, index) {
            return index + 1;
          },
        },
      },
      yAxis: {
        type: "value",
        name: "流畅度",
        nameTextStyle: {
          color: "#AFB1B2",
          fontSize: 18,
        },
        nameGap: 30,
        max: 100,
        min: 0,
        splitNumber: 5,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DADEE1",
          },
        },
        axisLabel: {
          color: "#999999",
          fontSize: 14,
        },
      },
      series: [
        {
          data: data.interviewState.selfConfidenceData,
          type: "line",
          z: 9,
          smooth: true,
          symbolSize: 12,
          lineStyle: {
            width: 5,
            shadowBlur: 5,
            shadowColor: "rgba(0, 90, 252, 0.2)",
            shadowOffsetY: 7,
          },
          color: "#85a0ff",
        },
        {
          data: [],
          type: "line",
          z: 1,
          markLine: {
            symbol: "none",
            data: [
              {
                name: "及格",
                yAxis: 60,
                label: {
                  show: false,
                },
                blur: {
                  label: {
                    show: false,
                  },
                  lineStyle: { show: false },
                },
              },
            ],
            lineStyle: {
              color: "#fe98ea",
              type: "solid",
              width: 2,
            },
          },
        },
        {
          data: [],
          type: "line",
          z: 1,
          markLine: {
            symbol: "none",
            data: [
              {
                name: "满分",
                yAxis: 100,
                label: {
                  show: false,
                },
                blur: {
                  label: {
                    show: false,
                  },
                  lineStyle: { show: false },
                },
              },
            ],
            lineStyle: {
              color: "#9370F2",
              type: "solid",
              width: 2,
            },
          },
        },
      ],
    };
    presentationOption && presentationChart.setOption(presentationOption);
  </script>
</html>
